import React, { useState, useEffect } from 'react'
import './index.scss'
import {createHashHistory} from 'history'
import { NavBar, Icon } from 'antd-mobile';
const history = createHashHistory();
const Com = (props) => {
  const [ address, setAddress ] = useState('')
  const { BMap, BMAP_STATUS_SUCCESS } = window
  useEffect(() => {
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    // 设置中心点坐标
    var point = new BMap.Point(117.95546388,28.45762255);
    // 设置地图展示级别，数值越大，范围越大
    map.centerAndZoom(point, 19);
    
    var geolocation = new BMap.Geolocation();
    // 开启SDK辅助定位
    geolocation.enableSDKLocation();
    geolocation.getCurrentPosition(function (r) {
        // alert(r.point)
        if (this.getStatus() === BMAP_STATUS_SUCCESS) {
            var mk = new BMap.Marker(r.point); // r.point对象代表当前定位到的经纬度坐标，
            console.log(mk)
            map.addOverlay(mk);//标出所在地
            map.panTo(r.point);//地图中心移动
            // alert('您的位置：'+r.point.lng+','+r.point.lat);
            var point = new BMap.Point(r.point.lng, r.point.lat);//用所定位的经纬度查找所在地省市街道等信息
            // alert(point);
            var coordinate = "117.95546388,28.45762255";//设置的签到点经纬度 
            // alert(coordinate)
            var arr = coordinate.split(",");//切割经纬度
            var lon = arr[0];
            var lat = arr[1];
            var pointA = new BMap.Point(lon, lat);
            // 创建地址解析器实例
            var gc = new BMap.Geocoder();
            // 根据坐标得到地址描述
            gc.getLocation(point, function (rs) {//获取当前定位所在地
                console.log(rs) // rs对象中包含了当前的地址信息
                var province = 0; //获取省份
                var city = 0; //获取城市
                var district = 0; //区
                var street = 0; //街
                // var streetNumber = 0; //街
                // var business = 0; //建筑
                var addComp = rs.addressComponents;
                province = addComp.province; //获取省份
                city = addComp.city; //获取城市
                district = addComp.district; //区
                street = addComp.street; //街
                // streetNumber = addComp.streetNumber; //街
                // business = addComp.business; //商业建筑
                var v=province+city+district+street
                // streetNumber+business;
                //alert(v)
                setAddress(v)
            });
            var circle = new BMap.Circle(pointA, 100, {//签到地点
                fillColor: "blue",//圆形颜色
                strokeWeight: 1,
                fillOpacity: 0.2,
                strokeOpacity: 0.2
            });// 显示签到点的位置（半径为100米的一个圆）
            map.addOverlay(circle);
            var a = new BMap.Marker(pointA);//标出目的地所在地1
            map.addOverlay(a);//标出目的地所在地2

            //计算当前位置与考勤点距离
            var distance = map.getDistance(pointA, point).toFixed(2);
            console.log("您距离签到地点" + distance + "米！");
            if (distance <= 100) {//逻辑处理
                //在范围内
                console.log("签到成功")
            } else {//逻辑处理
                //不在范围内

                console.log("签到失败")
            }
        } else {//错误提示
            // $("#errormsg").html("定位出错，请重新尝试");
            // $("#errormsg").show();
            // alert('failed' + this.getStatus());
        }
    }, {enableHighAccuracy: true})
  },[])
  // const info = {
  //   address: 'a'
  // }
  return (
    <>
      <div className="attendance_signin_header">
        <NavBar
          mode="light"
          icon={<Icon type="left"/>}
          onLeftClick={() => history.goBack()}
          rightContent="考勤情况"
        >考勤签到</NavBar>
        <div id="allmap"></div>
      </div>
      <div className="attendance_signin_content content">
        <div className="add_note">
          <p>添加备注(选填)</p>
          <div className="upload_img"></div>
        </div>
        <div className="address_info">
          我的位置<span>(不在考勤范围)</span>
          <div className="detailAdress">
            <img src="./images/application_ images/address_03.png" alt=""/>
            {address}
          </div>

        </div>
        <button className="signin_btn" onClick={() => {
          console.log(111)
            const d = new Date()
            const year = d.getFullYear()
            const mouth = d.getMonth()
            const day = d.getDate()
            let hour = d.getHours()
            const minutes = d.getMinutes()
            let seconds = d.getSeconds()
            console.log(112)
            if(hour > 12) {
              hour = '下午' + (hour - 12)
              
            } else {
              hour = '上午' + hour
            }
            if(seconds >=10) {
            } else {
              seconds = 0 + seconds
            }
            
            const time = year + '年' + (mouth+1) + '月' + day + '日' + hour+':' + minutes+':' + seconds
            console.log(222)
          props.history.push({pathname:"/application/signin/success", state: { address, time}})
        }}>考勤打卡</button>
      </div>
    </>
  )
}

export default Com